import React, { Component } from 'react'
import ReactSwipe from 'react-swipe';
import Styles from './index.less'
const carouselList = [
  {
    title: '智能制造',
    subTitle: 'Industry Link'
  },
  {
    title: '智能城市',
    subTitle: 'City Link'
  },
  {
    title: '智能农业',
    subTitle: 'Farming Link'
  },
  {
    title: '智能人居',
    subTitle: 'Home Link'
  },
]
class BannerSwipe extends Component {
  render() {
    const { carouselList } = this.props
    return (
      <ReactSwipe className={Styles.carouselTitle} swipeOptions={{continuous: true, auto: 2000}}>
        {
          carouselList.map((item) => (
            <div className={Styles.swipeItem} key={item.subTitle}>
              <div className={Styles.title}>{item.subTitle}</div>
              <div className={Styles.subTitle}>{item.title}</div>
            </div>
          ))
        }
      </ReactSwipe>
    )
  }
}
export default class Banner extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div className={Styles.banner}>
        <div className={Styles.bannerContainer}>
          <video className={Styles.bannerVideo} src="//cloud.video.taobao.com/play/u/2663106983/p/1/e/6/t/1/50263414950.mp4" autoPlay muted loop></video>
          <div className={Styles.bannerLeft}>
            <h1>已标准生态之美</h1>
            <h1>造IoT产业之福</h1>
            <p>Bridge industrialization gap and Contribute to IoT ecosystem</p>
            <div className={Styles.buttonContainer}>
              <a className={Styles.learnMore} src="">了解更多</a>
              <a className={Styles.addUs} src="">加入我们</a>
            </div>
          </div>
          <div className={Styles.bannerRight}>
            <BannerSwipe carouselList={carouselList}/>
          </div>
        </div>
      </div>
    )
  }
}
